<template>
    <div class="bg">
        <nav-com :title="title" :showView='showView' @back="backHandler()"></nav-com>
        <van-pull-refresh v-model = 'isLoading' @refresh='onRefresh'>
            <div v-if="list.length==0" class="empty">
                <img src='../../assets/t4.png'>
                <p>{{listEmpty}}</p>
            </div>
            <template v-if="Dataflag == 'fttProfit' || Dataflag == 'referralProfit' || Dataflag == 'teamProfit' || Dataflag == 'pinmoney'">
                <ul class="teamlist">
                    <van-list v-model="loading" :finished="finished" @load="onload">
                        <li v-for="(item,index) in list" :key="index">
                            <div class="teamlist_title">{{item.createdAt | formatDate}}</div>
                            <div class="teamlist_bottom">
                                <p>{{item.name}}</p>
                                <span>{{item.value}}</span>
                            </div>
                        </li>
                    </van-list>
                </ul>
            </template>
        </van-pull-refresh>
    </div>
</template>
<script>
import {getAccountItems}  from '@/api/api'
import navCom from '@/component/nav'
export default {
    name:'bonusList',
    components:{
        navCom
    },
    data() {
        return {
            showView:true,
            uid: weixin.getUserId(),
            title:'',
            listEmpty:'',
            list:[],
            isLoading:false,
            loading:true,
            finished:false,
            total:0,
            pageNo:1,
            Dataflag:'',
        }
    },
    mounted(){
        this.init()
    },
    methods:{
        //返回
        backHandler(){
            this.$router.go(-1)
        },
        //下拉刷新
        onRefresh(){
            this.list = []
            this.pageNo = 1
            this.init()
            this.isLoading = false
        },
        //数据加载
        onload(){
            this.init()
        },
        //初始化
        init(){
            this.Dataflag = location.href.substring(location.href.indexOf('list/') + 5);
            if(this.Dataflag == 'fttProfit'){
                this.title = '分红奖励'
            }else if(this.Dataflag == 'referralProfit'){
                this.title = '分享奖励'
            }else if(this.Dataflag == 'teamProfit'){
                this.title = '团队奖励'
            }else if(this.Dataflag == 'pinmoney'){
                this.title = '总资产记录'
            }

            if(this.Dataflag == 'fttProfit' || this.Dataflag == 'referralProfit' || this.Dataflag == 'teamProfit' || this.Dataflag == 'pinmoney' ){
                this.getAccountItemsHandler()
            }
            
        },
        //获取分红分享团队总资产数据
        getAccountItemsHandler(){
            getAccountItems({userId:this.uid,acctc:this.Dataflag,pageNo:this.pageNo}).then(res=>{
                if(res.data.code == 200){
                    let rows = res.data.data.rows
                    if(rows.length == 0){
                        if(this.Dataflag == 'fttProfit'){
                            this.listEmpty = '您还没有分红奖励记录哦~'
                        }else if(this.Dataflag == 'referralProfit'){
                            this.listEmpty = '您还没有分享奖励记录哦~'
                        }else if(this.Dataflag == 'teamProfit'){
                            this.listEmpty = '您还没有团队奖励记录哦~'
                        }else if(this.Dataflag == 'pinmoney'){
                            this.listEmpty = '您还没有总资产记录哦~'
                        }
                    }
                    this.pageNo++
                    this.list = this.list.concat(rows)
                    this.total = res.data.data.total
                    if(this.list.length < 1 ){
                        this.finished = true
                    }else if(this.list.length >= this.total){
                        this.finished = true
                    }else {
                        this.finished = false
                        this.loading = false
                    }
                    
                    
                }else {
                    this.$dialog.alert({
                        message:res.data.msg
                    })
                }
            })
        },

    }
}
</script>
<style scoped>
p {padding:0; margin:0;}
.bg {background: #F1F3F6; min-height: 100vh;}
.teamlist {margin:0 4vw; height:auto; overflow: hidden; margin-bottom:20vw;}
.teamlist li {background: #fff;  margin-top:4vw; height:auto; overflow: hidden;}
.teamlist_title {padding-left:4vw; border-radius: 1.3vw; border-bottom: 1px solid #e8e8e8; color:#999; height:8vw; line-height:8vw;}
.teamlist_bottom {display: flex; justify-content: space-between; height:12vw; line-height: 12vw;}
.teamlist_bottom p {padding-left:4vw;  color:#333;}
.teamlist_bottom span {padding-right:4vw; color:#FF0000;}
.empty {padding-top:29.33vw; text-align: center;}
.empty img {width:54.4vw; height:37.6vw;}
.empty p {font-size:3vw; color:#333; margin-top:4vw;}
</style>